<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
* DOM to JSON
 * 将 DOM（Document Object Model）转换为 JSON（JavaScript Object Notation）是一种将 DOM 结构转换为 JSON 格式数据的技术。
 * 这种技术用于将网页的 DOM 结构转换为可用于数据交换的 JSON 数据格式。
 * DOM 是 HTML、XML 和 XHTML 文档的对象表示方法，包含文档的内容、属性和样式等信息。
 * JSON 是一种轻量级的数据格式，易于阅读和编写，也易于解析和生成。
 -->
<div class="box">
    <p class="p">hello world</p>
    <div class="person">
        <span class="name">DOM2JSON</span>
        <span class="age">100</span>
    </div>
</div>
<script>
    function DOM2JSON(domTree){
        if(!domTree) return;
        let rootObj = {
            tagName: domTree.tagName,
            children: []
        }

        const children = domTree.children
        if(children){
            Array.from(children).forEach((element, i) => {
                rootObj.children[i] = DOM2JSON(element)
            })
        }
        return rootObj
    }

    console.log(DOM2JSON(document.querySelector('.box')))
</script>
</body>
</html>
